<template>
  <a-card :bordered="false">
    <a-card :bordered="false" size="small">
      <a-breadcrumb>
        <a-breadcrumb-item><router-link to="/saleList">销售管理</router-link></a-breadcrumb-item>
        <a-breadcrumb-item>销售详情</a-breadcrumb-item>
      </a-breadcrumb>
    </a-card>
    <a-card>
      <a-tabs v-model="activeKey">
        <a-tab-pane :key="1" tab="基础信息">
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">销售姓名:</div>
            <div class="meizong_detail_val">{{detail.name}}</div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">销售手机号:</div>
            <div class="meizong_detail_val">{{detail.mobile}}</div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">销售阿里号:</div>
            <div class="meizong_detail_val">{{detail.aliAccount}}</div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">邀请人手机:</div>
            <div class="meizong_detail_val">{{detail.fromMobile}}</div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">创建时间:</div>
            <div class="meizong_detail_val">{{detail.createTime}}</div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">身份证正面:</div>
            <div class="meizong_detail_val">
              <ant-img :antImgesUl="detail.identFront"/>
              <!-- <ant-img :antImges="detail.identFront" /> -->
            </div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">身份证反面:</div>
            <div class="meizong_detail_val">
              <ant-img :antImgesUl="detail.identBack"/>
              <!-- <ant-img :antImges="detail.identBack" /> -->
            </div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">状态:</div>
            <div class="meizong_detail_val">{{detail.status | status}}</div>
          </div>
          <div class="meizong_detail_row" v-show="detail.status == 1">
            <div class="meizong_detail_title">操作:</div>
            <div class="meizong_detail_val">
              <a-button type="danger" @click="handCheck()" >进行审核</a-button >
            </div>
          </div>
        </a-tab-pane>
        <a-tab-pane :key="2" tab="审核记录">
          <a-table 
            ref="table" 
            size="middle" 
            bordered 
            rowKey="id" 
            :scroll="{ x: 1300 }"
            :columns="columns" 
            :dataSource="tableData" 
            :pagination="ipagination" 
            :loading="loading" 
            @change="handleTableChange" >
          </a-table>
        </a-tab-pane>  
      </a-tabs>
    </a-card>
    <!-- 表单区域 -->
    <examine-modal ref="modalForm" @closeModal="closeModal" @examineModal="examineModal"></examine-modal>
  </a-card>
</template>

<script>
import ExamineModal from '@/views/components/meizong/examineModal'
import AntImg from '@/views/components/meizong/antImg'
import ApiTree from '@/api/personnel/saleList';
import { Slime } from '@/mixins/slime';
export default {
  name: 'saleDetail',
  mixins: [Slime],
  components: {
    ExamineModal,
    AntImg,
  },
  data() {
    return {
      activeKey: 1,
      detailId: null,
      detail:{},
      //table
      tableData:[],
      columns: [
        {
          title: "审批人id",
          align: "center",
          dataIndex: "userId",
        },
        {
          title: "审批人姓名",
          align: "center",
          dataIndex: "userName",
        },
        {
          title: "动作",
          align: "center",
          dataIndex: "action",
          customRender: function (status) {
            switch (status) {
              case 0:
                return "初始状态";
              case 1:
                return "待审核";
              case 2:
                return "审核不通过";
              case 3:
                return "停用";
              case 5:
                return "启用中";
              default:
                return "未知状态";
            }
          },
        },
        {
          title: "备注",
          align: "center",
          dataIndex: "remark",
        },
        {
          title: "创建时间",
          align: "center",
          dataIndex: "createTime",
        },
      ],
    };
  },
  created() {
    let id = this.$route.query.id
    this.detailId = id
    this.loadData();
    this.loadRecords();
  },
  methods: {
    // 加载表格数据
    loadData() {
      let that = this
      let id = this.detailId
      ApiTree.getDetail(id).then((res)=>{
        let data = res.result
        this.detail = {
          ...data,
          identFront: that.antImageArr(data.identFront),
          identBack: that.antImageArr(data.identBack),
        }
      })
    },
    //审核记录
    loadRecords(){
      let id = this.detailId
      ApiTree.detailRecords(id).then((res)=>{
        let data = res.result
        this.tableData = data
      })
    },
    //1审核通过/0不通过
    handCheck(){
      this.$refs.modalForm.open()
    },
    //审核结束
    examineModal(val){
      const that = this;
      let param = {
        ...val,
        saleId: this.detailId, //这里记得修改
      }
      ApiTree.detailCheck(param).then((res) => {
        that.$message.success('审核成功');
      }).finally(() => {
        that.loadData();
        that.loadRecords();
      });
    }
  },
  filters: {
    //订单状态
    status: function (status) {
      switch (status) {
        case 0:
          return "初始状态";
        case 1:
          return "待审核";
        case 2:
          return "审核不通过";
        case 3:
          return "停用";
        case 5:
          return "启用中";
        default:
          return "未知状态";
      }
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>